<template>
	<view>
		<view style="margin: 80rpx auto; width: 280rpx;    filter: drop-shadow(0px 0px 14px #000);">
			<image src="../../static/image/logo.png" mode="widthFix" style="width: 280rpx;height: 86.12rpx;"></image>
		</view>
		<text style="text-align: center;color: #aaaaaa;font-weight: 510;">用户注册</text>
		<form @submit="formSubmit">
			<view class="uni-form-item verify_container">
				<view class="image_container">
					<image src="../../static/image/cellphone.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<input @input="cellphoneInput" class="uni-input" name="cellphone" placeholder="请输手机号" />
			</view>

			<view class="uni-form-item verify_container">
				<view class="image_container">
					<image src="../../static/image/nickname.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<input @input="nickNameInput" class="uni-input" name="nickname" placeholder="请输入昵称" />
			</view>

			<view class="uni-form-item verify_container">
				<view class="image_container">
					<image src="../../static/image/lock.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<input @input="passwordInput" class="uni-input" name="password" placeholder="请输密码" />
			</view>
			<view class="uni-form-item verify_container">
				<view class="image_container">
					<image src="../../static/image/lock.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<input @input="repasswordInput" class="uni-input" name="repassword" placeholder="请再次输入密码" />
			</view>
			<button class="submit_btn" form-type="submit" type="primary">注册</button>
			<navigator class="login" url="../login/index" hover-class="navigator-hover"><text type="default">已有账号,直接登陆 →</text></navigator>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				repassword: '',
				cellphone: '',
				nickname: ''
			};
		},
		onLoad() {},
		methods: {
			formSubmit: function(e) {
				if(!this.isPoneAvailable(this.cellphoen)){
					return uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
				}
				if(this.nickname === ''){
					return uni.showToast({
						icon:"none",
						title:"请输入昵称"
					})
				}
				if(this.password === ''){
					return uni.showToast({
						icon:"none",
						title:"密码不能为空"
					})
				}
				if(this.password !== this.repassword){
					return uni.showToast({
						icon:"none",
						title:"两次输入密码不一致"
					})
				}
				var formdata = e.detail.value;
				uni.request({
					url: this.websiteUrl + "/api/register",
					method: "POST",
					data: formdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(resp) {
						console.log(resp.data);
					}
				})
			},
			passwordInput: function(e) {
				this.password = e.detail.value;
			},
			repasswordInput: function(e) {
				this.repassword = e.detail.value;
			},
			cellphoneInput: function(e) {
				this.cellphoen = e.detail.value;
			},
			nickNameInput: function(e) {
				this.nickname = e.detail.value;
			},
			isPoneAvailable: function(cellphone) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(cellphone)) {
					return false;
				} else {
					return true;
				}
			}
		}
	};
</script>

<style>
	page {
		background-color: white;
	}

	.uni-form-item {
		display: flex;
		width: 80%;
		margin: 60rpx auto 0;

	}

	.verify_container {
		display: flex;
		border: solid 1rpx #cccccc;
		border-radius: 10rpx;
		height: 72rpx;
	}

	.uni-form-item button {
		height: 72rpx;
		width: 200rpx;
		line-height: 72rpx;
		margin-left: 30rpx;
	}

	.uni-form-item .image_container {
		width: 100rpx;
		text-align: center;
		line-height: 80rpx;
		height: 72rpx;
		border-radius: 10rpx 0 0 10rpx;
	}

	.uni-form-item .auth_container {
		width: 70%;
	}

	.uni-form-item image {
		margin-left: 10rpx;
	}

	.uni-form-item input {
		background-color: white;
		height: 68rpx;
		width: 100%;
		padding-left: 20rpx;
		border-radius: 0 10rpx 10rpx 0;
		border-left: 1px solid #cccccc;
	}

	.submit_btn {
		width: 80%;
		height: 72rpx;
		margin-top: 30rpx;
		line-height: 72rpx;
	}

	.login {
		float: right;
		margin-right: 10%;
		font-size: 30rpx;
		color: #409eff;
	}
</style>
